<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Turf - distance</title>
  <style>
    #mapDiv { width: 600px; height: 400px; }
    .map-box{ padding: 10px; font-size: 16px; }
    .length, .along{ font-size: 20px; margin-bottom: 10px; }
    input.along{ width: 50px; }
  </style>

  <script src="js/jquery-1.11.3.min.js"></script>
  <script src="js/turf.min.js"></script>
  <script src="https://maps.googleapis.com/maps/api/js?libraries=drawing"></script>
</head>
<body onload="initMap()">
  <div class="length"></div>
  <div id="mapDiv"></div>

<script>
var map, infoWindow = new google.maps.InfoWindow({ content: "" });
var dataMap = new google.maps.Data();
var styles=[{featureType:"poi",stylers:[{visibility:"off"}]},{stylers:[{saturation:-70},{lightness:37},{gamma:1.15}]},{elementType:"labels",stylers:[{gamma:.26},{visibility:"on"}]},{featureType:"road",stylers:[{lightness:0},{saturation:0},{hue:"#ffffff"},{gamma:0}]},{featureType:"road",elementType:"labels.text.stroke",stylers:[{visibility:"off"}]},{featureType:"road.arterial",elementType:"geometry",stylers:[{lightness:20}]},{featureType:"road.highway",elementType:"geometry",stylers:[{lightness:50},{saturation:0},{hue:"#ffffff"}]},{featureType:"administrative.province",stylers:[{visibility:"on"},{lightness:-50}]},{featureType:"administrative.province",elementType:"labels.text.stroke",stylers:[{visibility:"off"}]},{featureType:"administrative.province",elementType:"labels.text",stylers:[{lightness:20}]}];


function initMap() {
  var point1 = {
    "type": "Feature",
    "properties": {},
    "geometry": {
      "type": "Point",
      "coordinates": [121.6164207458496,25.04330389487308]
    }
  };
  var point2 = {
    "type": "Feature",
    "properties": {},
    "geometry": {
      "type": "Point",
      "coordinates": [121.61667823791504,25.05512308589586]
    }
  };
  var distance = turf.distance(point1, point2, 'kilometers');
  $('.length').text('兩點 (直線) 距離約 ' + distance + ' 公里');

  // 地圖初始設定
  var mapOptions = {
      center: new google.maps.LatLng(25.04880, 121.615262),
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      styles: styles
  };

  var mapElement = document.getElementById("mapDiv");

  // Google 地圖初始化
  map = new google.maps.Map(mapElement, mapOptions);

  dataMap.addGeoJson(point1);
  dataMap.addGeoJson(point2);

  dataMap.setStyle(function(feature){
    if( feature.getProperty('line') ){ return { strokeWeight: 5, strokeColor: '#e55', strokeOpacity: 1 }; }
  });
  dataMap.setMap(map);
}

</script>


</body>
</html>